<template>
  <div class='map-box'>
    <div id="map"></div>
    <p><img :src="imgs.position" alt="" class="fl"><span>{{info.place}}</span><span class="btn-active reload" @click="getLocation">重新定位</span></p>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        position:require('../../../assets/img/more/help/3.png')
      },
      info:{
        place:"武汉市"
      },
      map:null,
      settime:null
    };
  },
  methods: {
    getLocation(){
      var that=this
      // 默认点
      var point={
        x:"114.326121",
        y:"30.64374",
      }

      // this.$emit("locationInfo","asdfasdf")
      var getL=new BMap.Geolocation()
      getL.getCurrentPosition(function(r){
        if(r){
          point.x=r.point.lng
          point.y=r.point.lat

          var mPoint = new BMap.Point(point.x,point.y); 
          var mk = new BMap.Marker(mPoint);

          that.map.addOverlay(mk);
          that.map.panTo(r.point);

          var gc = new BMap.Geocoder();
          gc.getLocation(mPoint, function(rs){
            var addComp = rs.addressComponents;
            that.map.setCurrentCity(addComp.city);
            // alert(`${rs.addressComponents.district}${rs.addressComponents.street}${rs.addressComponents.streetNumber}`)
            that.info.place=`${rs.addressComponents.city}${rs.addressComponents.district}${rs.addressComponents.street}${rs.addressComponents.streetNumber}`
            that.$emit("locationInfo",`[${r.point.lng},
${r.point.lat},
${rs.addressComponents.province}${rs.addressComponents.city}${rs.addressComponents.district}${rs.addressComponents.street}${rs.addressComponents.streetNumber}]`)
          })
        }
      })
    }
  },
  created() {},
  mounted(){
    this.$nextTick(()=>{
      this.map = new BMap.Map("map");    // 创建Map实例
      this.map.centerAndZoom("武汉", 12);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
      // this.map.enableScrollWheelZoom(true)
      // var zoomCtrl = new BMap.ZoomControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMap.Size(20, 20)});
      // this.map.addControl(zoomCtrl);
 
      // 定位
      setTimeout(()=>{
        this.getLocation()
      },100)

      this.map.setCurrentCity("武汉");          // 设置地图显示的城市 此项是必须设置的
    })
  }
};
</script>
<style lang="scss" scoped>
.map-box {
  margin: 15px;
  margin-bottom: 0;

  #map{
    height: 250px;
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
  }

  >p{
    padding: 5px 0;
    line-height: 30px;

    img{
      width: 20px;
      height: 20px;
      transform: translateY(5px);
    }

    span{
      font-size: 14px;
    }
    .reload{
      font-size: 12px;
      color: #999;
      margin-left: 20px;
    }
  }
}
</style>